:root
{
--player-width: clamp(var(--player-min-width), var(--vh) / 2 * 16 / 9, var(--vw) / 2 - var(--chat-min-width));
--chat-width: calc(var(--vw) / 2 - var(--player-width));
}

html, body
{
min-width: calc((var(--player-min-width) + var(--chat-min-width)) * 2);
min-height: max(var(--player-min-height) * 2, var(--chat-min-height) * 2);
}

.p1, .p2, .p3, .p4
{
display: block;
width: var(--player-width);
}
.p1, .p2, .c1, .c2
{
bottom: calc(var(--vh) / 2);
}
.p3, .p4, .c3, .c4
{
top: calc(var(--vh) / 2);
}
.p1, .p3
{
left: auto;
right: calc(var(--vw) / 2);
}
.p2, .p4
{
left: calc(var(--vw) / 2);
right: auto;
}

.c1, .c2, .c3, .c4
{
display: block;
width: var(--chat-width);
}
.c1, .c3
{
left: 0;
right: auto;
}
.c2, .c4
{
left: auto;
right: 0;
}

.m1, .m2, .m3, .m4
{
display: block;
}
.m1, .sm1, .m2, .sm2
{
top: 0;
}
.ch1, .ch2
{
top: 3em;
}
.m1, .ch1, .m3, .ch3
{
right: calc(var(--vw) / 2);
}
.sm1, .sm3
{
right: calc(var(--vw) / 2 + 3em);
}
.m2, .ch2, .m4, .ch4
{
right: var(--chat-width);
}
.sm2, .sm4
{
right: calc(var(--chat-width) + 3em);
}
.m3, .sm3, .m4, .sm4
{
top: calc(var(--vh) / 2);
}
.ch3, .ch4
{
top: calc(var(--vh) / 2 + 3em);
}